<template>
  <div v-show="active" class="dialog w-full h-full center~ cursor-pointer" @click="onClose">
    <div class="flex flex-col rounded bg-light-50"
         :style="{height: `${height}px`, width: `${width}px`}"
         @click="e => e.stopPropagation()">
      <div class="flex-none w-full border-b border-gray-200 box-border p-10px text-sm text-center">{{ title }}</div>
      <div class="flex-1">
        <slot></slot>
      </div>
      <div class="flex justify-end flex-none w-full border-t border-gray-200 box-border p-10px text-sm">
        <div class="px-10px py-5px box-border text-light-50 bg-blue-600 mx-5px rounded cursor-pointer"
             @click="onSubmit">
          确定
        </div>
        <div class="px-10px py-5px box-border text-light-50 bg-red-600 mx-5px rounded cursor-pointer"
             @click="onClose">
          取消
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

import {toRefs} from "vue";

interface Props {
  width?: number
  height?: number
  active?: boolean
  title: string
}

const emits = defineEmits(["update:active", "close", "submit"])
const rawProps = withDefaults(defineProps<Props>(), {
  width: 800,
  height: 600,
  active: false
})

const {active, width, height, title} = toRefs(rawProps)

function onClose() {
  emits("close")
  emits("update:active", false)
}

function onSubmit() {
  emits("submit")
}
</script>

<style scoped>
.dialog {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
</style>